<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上传图片</title>
    <link rel="stylesheet" href="../static/css/animate.css">
    <link rel="stylesheet" href="../static/css/main.css">
    <link rel="stylesheet" href="../static/css/bootstrap.min.css">
    <link rel="stylesheet" href="../static/css/font-awesome.min.css">
    <link rel="stylesheet" href="../static/css/media-queries.css">
    <link rel="stylesheet" href="../static/css/slit-slider.css">
    <link rel="stylesheet" href="../static/css/owl.carousel.css">
    <link rel="stylesheet" href="../static/css/component.css">
    <link rel="stylesheet" href="../static/css/home.css">
    <link rel="stylesheet" href="../static/css/picture.css">
    <link rel="stylesheet" href="../static/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/5.11.2/css/all.css">
</head>
<body>
<div style="width: 100%;height: 100%;display: flex;flex-direction: column;">
    <div>

        <header id="navigation" class="navbar navbar-inverse" style="z-index: 100;width: 100%">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="{{ url_for('about') }}">
                        <h1 id="logo">Hiddenmark</h1>
                    </a>
                </div>
                <nav class="collapse navbar-collapse navbar-right" role="Navigation">
                    <ul id="nav" class="nav navbar-nav">
                        <li><a href="{{ url_for('home') }}">Home</a></li>
                        <li class="current"><a href="{{ url_for('picture') }}">Picture</a></li>
                        <li><a href="{{ url_for('audio') }}">Audio</a></li>
                        <li><a href="{{ url_for('video') }}">Video</a></li>
                        <li><a href="{{ url_for('table') }}">All</a></li>
                        <li><a href="{{ url_for('index') }}">Logout</a></li>
                    </ul>
                </nav>
            </div>
        </header>
    </div>
    <div class="myContainer" style="margin-top:-20px;">
        <div class="left">
            <div class="encryption myActive" id="encryption">UpLoad</div>
            <div class="decode" id="decode">DownLoad</div>
        </div>
        <div class="right" id="right">
            <h1 style=" margin-top: -250px;margin-bottom: 10px;">Image watermark</h1>
            <text>Add a layer of dark net to your image</text>
            <form method="post" action="http://localhost:5000/picture" enctype="multipart/form-data">
                <input type="file" size="30" name="photo"/>
                <br>
                <input type="text" name="password" style="margin-top:0px;margin-left: -100px;" placeholder="加密密码"/>
                <br>
                <input type="submit" value="Let's Go" class="mySubmit"/>
            </form>
        </div>

        <div class="right-table isDisplay" id="right-table">
            <table class="table table-striped " style="word-break:break-all">
                <tr style="background-color: #000;">
                    <th>previous_hash</th>
                    <th>username</th>
                    <th>hmsg</th>
                    <th>time_stamp</th>
                    <th>hash</th>
                    <th>encryption</th>
                    <th>decode</th>
                </tr>
                {% for item in obj_list %}
                    <tr style="background-color: #000;">
                        <td>{{ item.previous_hash }}</td>
                        <td>{{ item.username }}</td>
                        <td>{{ item.hmsg }}</td>
                        <td>{{ item.time_stamp }}</td>
                        <td>{{ item.hash }}</td>
                        <td><a href="{{ url_for('download_encryption',filename= item.filename) }}">{{ item.filename }}</a></td>
                        <td><a href="{{ url_for('download_decode',filename= item.filename) }}">{{ item.filename }}</a></td>
                    </tr>
                {% endfor %}
            </table>

        </div>
        <div class="footer" style="margin-top: 200px;">
            <p class="p1">@2020 Hiddenmark 设计团队：评委最喜欢队</p>
        </div>

    </div>
</div>

<script>
    const encryption = document.querySelector("#encryption");
    const decode = document.querySelector("#decode");

    encryption.addEventListener('click', addToEncClass);
    decode.addEventListener('click', addToDecClass);

    function addToEncClass() {
        $("#encryption").addClass("myActive");
        $("#decode").removeClass("myActive");
        $("#right").removeClass("isDisplay");
        $("#right-table").addClass("isDisplay");
    }

    function addToDecClass() {
        $("#encryption").removeClass("myActive");
        $("#decode").addClass("myActive");
        $("#right").addClass("isDisplay");
        $("#right-table").removeClass("isDisplay");


    }
</script>

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js" type="text/javascript"></script>

</body>
</html>